import QtQuick 1.1
import com.nokia.meego 1.0
import QtMobility.gallery 1.1
import ecards.qmlcomponents 1.0

Sheet {
    id: sheet;

    acceptButtonText: "Apply"
    rejectButtonText: "Cancel"

    property alias color: colorBox.color;

    /*
    ColorTools {
        id: colorTools;
    }*/

    function updateSliders(color) {
        console.log('updateSliders');
        var r = parseInt(color.toString().substr(0*2 + 1, 2), 16) / 256.0;
        var g = parseInt(color.toString().substr(1*2 + 1, 2), 16) / 256.0;
        var b = parseInt(color.toString().substr(2*2 + 1, 2), 16) / 256.0;
        hue.value = colorTools.hue(color);
        sat.value = colorTools.saturation(color);
        lev.value = colorTools.lightness(color);
        //console.log('hue rgb: ' + colorTools.hue(r,g,b));
        //console.log('hue std: ' + colorTools.hue(color));
        //saturation.value = colorTools.saturation(color);
        //value.value = colorTools.value(color);
    }

    content: Flickable {
        id: flick;

        Label {
            text: "Hue"
            color: "white";
            y: 30;
            x: 10;
        }

        function updateColorBox() {
            console.log('updateColorBox');
            colorBox.color = Qt.hsla(hue.value, sat.value, lev.value, 1);
            bwGradient.color = Qt.hsla(hue.value, 0, 0.5, 1);
            hueGradient.color = Qt.hsla(hue.value, 1, 0.5, 1);
            valueGradient.color = Qt.hsla(hue.value, sat.value, 0.5, 1);
        }

        Item {
            x: 10
            y: 50
            width: 600;

            Rectangle {
                x:280
                y:-260
                width: 50
                height: 600
                rotation: 90
                radius: 10
                gradient: Gradient {
                    GradientStop { position: 1.0; color: "#FF0000" }
                    GradientStop { position: 0.85; color: "#FFFF00" }
                    GradientStop { position: 0.76; color: "#00FF00" }
                    GradientStop { position: 0.5; color: "#00FFFF" }
                    GradientStop { position: 0.33; color: "#0000FF" }
                    GradientStop { position: 0.16; color: "#FF00FF" }
                    GradientStop { position: 0.0; color: "#FF0000" }
                }
            }
            Slider {
                id: hue;
                y: 10
                x: 2
                width: parent.width;

                minimumValue: 0
                maximumValue: 1
                onValueChanged: {
                    flick.updateColorBox();
                }
            }
        }




        Label {
            text: "Saturation"
            color: "white";
            x: 10
            y: 130;
        }


        Item {
            x: 10
            y: 150
            width: 600;

            Rectangle {
                x:280
                y:-260
                width: 50
                height: 600
                rotation: 90
                radius: 10
                gradient: Gradient {
                    GradientStop {
                        id: bwGradient; position: 1.0;
                        Behavior on color {
                            ColorAnimation { duration: 150 }
                        }
                    }
                    GradientStop {
                        id: hueGradient; position: 0.0;
                        Behavior on color {
                            ColorAnimation { duration: 150 }
                        }
                    }
                }
            }
            Slider {
                id: sat;
                y: 10
                x: 2
                width: parent.width;

                minimumValue: 0
                maximumValue: 1
                onValueChanged: {
                    flick.updateColorBox();
                }
            }
        }


        Label  {
            text: "Value"
            color: "white";
            x: 10
            y: 230;
        }

        Item {
            x: 10
            y: 250
            width: 600;

            Rectangle {
                x:280
                y:-260
                width: 50
                height: 600
                rotation: 90
                radius: 10
                gradient: Gradient {
                    GradientStop {
                        position: 1.0; color: "#101010";
                    }
                    GradientStop {
                        id: valueGradient;
                        position: 0.5;
                        Behavior on color {
                            ColorAnimation { duration: 150 }
                        }
                    }
                    GradientStop {
                        position: 0.0; color: "#FFFFFF";
                    }
                }
            }
            Slider {
                id: lev;
                y: 10
                x: 2
                width: parent.width;

                minimumValue: 0
                maximumValue: 1
                onValueChanged: {
                    flick.updateColorBox();
                }
            }
        }

        Label {
            x: 854-200+10
            y: 60
            text: "Current color"
            color: "white";
        }

        Rectangle {
            id: colorBox;
            x: 854-14-200
            y: 90
            radius: 20;
            width: 200; height: 200

            Rectangle {
                anchors.fill: parent;
                anchors.margins: -2;
                color: "white";
                radius: 20;
                z: -1;
            }

            Behavior on color {
                 ColorAnimation { duration: 150 }
            }

         }


        Rectangle {
            x: 36
            y: 320
            id: colors;
            radius: 15;
            width: 790
            height: 98
            color: "transparent"
            visible: false;



            Flow {
                anchors.fill: parent
                anchors.margins: 4
                spacing: 8

                Rectangle {
                     width: 100; height: 80
                     radius: 10;
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "#FFFFFF" }
                         GradientStop { position: 1.0; color: "#B0B0B0" }
                     }
                 }

                Rectangle {
                     width: 100; height: 80
                     radius: 10;
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "#FF0000" }
                         GradientStop { position: 1.0; color: "#600000" }
                     }
                 }

                Rectangle {
                     width: 100; height: 80
                     radius: 10;
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "#FF7F00" }
                         GradientStop { position: 1.0; color: "#603000" }
                     }
                 }

                Rectangle {
                     width: 100; height: 80
                     radius: 10;
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "#FFFF00" }
                         GradientStop { position: 1.0; color: "#606000" }
                     }
                 }

                Rectangle {
                     width: 100; height: 80
                     radius: 10;
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "#00FF00" }
                         GradientStop { position: 1.0; color: "#006000" }
                     }
                 }

                Rectangle {
                     width: 100; height: 80
                     radius: 10;
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "#0000FF" }
                         GradientStop { position: 1.0; color: "#000060" }
                     }
                 }

                Rectangle {
                     width: 100; height: 80
                     radius: 10;
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "#8B00FF" }
                         GradientStop { position: 1.0; color: "#400060" }
                     }
                 }

            }
        }
    }
}
